<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>山东快缴缴费单位</title>
    <link rel="stylesheet" href="${basePath}/static/css/aLi_tuBiao/iconfont.css">
    <link rel="stylesheet" href="${basePath}/static/css/bank_tuBiao/iconfontBank.css">
    <link rel="stylesheet" href="${basePath}/static/css/element-ui.css">
    <link rel="stylesheet" href="${basePath}/static/css/merchant.css">
    <link rel="stylesheet" href="${basePath}/static/css/zTreeStyle.css">
    <link rel="stylesheet" href="${basePath}/static/layui/css/layui.css">
    <script type="text/javascript" src="${basePath}/static/js/vue.min.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/jquery.min.js"></script>
    <!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <script type="text/javascript" src="${basePath}/static/js/merchant/element-ui.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/common.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/ajaxService.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/jquery.ztree.exedit.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/echarts.min.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/jQuery.md5.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/common.md5.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/flexibility.js"></script>
    <script type="text/javascript" src="${basePath}/static/layui/layui.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/es5-shim/4.5.10/es5-sham.js"></script>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/jquery.form.js"></script>
    <script type="text/javascript" src="${basePath}/static/js/merchant/countUp.js"></script>

    <!--[if IE]>
    <script type="text/javascript" src="${basePath}/static/js/merchant/fuckIE.js"></script>
    <![endif]-->
    <style scoped>
        html, body, #app{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .el-header{
            padding: 13px 20px;
        }
        .main_head {
            font-size: 16px;
            color: #999;
            margin-bottom: 10px;
        }
        .trend-chart {
            font-size: 16px;
            color: #999;
            padding-top: 20px;
            margin-bottom: 10px;
        }
        .btn-charts{
            color: #fff;
            background-color: #409EFF;
            border-color: #409EFF;
        }
        .box-card-style {
            height: 100px;
            text-align: center;
        }
        .box-card-style b {
            width: 6px;
            height: 6px;
            display: inline-block;
            margin-right: 10px;
            border-radius: 50%;
            vertical-align: middle;
        }
        .el-card__body {
            padding: 20px 0;
        }
        .box-card-style .icon {
            font-size: 24px;
            padding: 2px;
            border-radius: 50%;
            background: #ff4444;
            color: #fff;
        }

        .box-card-style .icon-1 {
            background: #ff4444;
        }
        .box-card-style .icon-yonghu {
            background: #00c192;
        }

        .box-card-style .icon-money {
            background: #fc720b;
        }
        .box-card-style-big {
            height: 100px;
        }
        .header_content i{
            margin-right: 5px;
        }
        .box-card-style-big b {
            width: 24px;
            height: 24px;
            background: #00AAEE;
            color: #fff;
            border-radius: 50%;
            padding: 2px;
            display: inline-block;
            text-align: center;
            line-height: 24px;
        }
        #resetBox .el-dialog__header{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border-bottom: 1px solid #ff4444;
            width: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: #fff;
        }
        #resetBox .el-dialog__headerbtn .el-dialog__close{
            color: #ff4444;
            font-size: 22px;

        }
        #resetBox .el-dialog__body{
            padding-top: 75px;
            padding-right:80px;
            padding-bottom: 0px;
        }
        #resetBox .el-dialog{
            width: 500px;
        }
        #resetBox .el-dialog__header{
            text-align: center;
        }
        #resetBox .dialog-footer{
            text-align: center;
        }
        #resetBox .el-input{
            width: 100%;
        }
        #resetBox .passwordWaring{
            color: #fa5555;
            font-size: 12px;
            line-height: 1;
            padding-top: 4px;
            position: absolute;
            top: 100%;
            left: 0;
        }
        .outSystemBox{
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            margin-left: 45px;
        }
        .el-submenu__title span{
            padding-left: 5px;
        }
        .menuChildBox{
            border-right: 4px solid transparent;
        }
        #app .iconfont{
            color: #ff4444;
        }

        #app .mainPage .iconfont{
            display: inline-block;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            width: 28px;
            height: 28px;
            position: relative;

        }
        #app .mainPage .el-card__body .icon:before{
            /*display: inline-block;*/
            /*width: 20px;*/
            /*height: 20px;*/
            color: #fff;
            font-size: 18px;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%,-50%);
            -moz-transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
            -o-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }

        #app .el-loading-mask{
            z-index: 2000;
        }
        .el-menu-vertical-demo .iconfont{
            font-size: 18px;
        }

        [v-cloak] {
            display: none;
        }
        .asideStyle{
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            position: fixed;
            left: 0;
            top: 60px;
        }
        .header_content div img{
            height: 33px;
            width: 200px;
            display: inline-block;
            margin-top: -10px;
            margin-left: 20px;
        }
        .main-right{
            margin-left: 200px;
            margin-top: 63px;
            height: 80%;
            overflow: auto;
        }
        .header{
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
        }
        .ieRowHeader{
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
        }
        .ieRowHeader div{
            height: 100%;
            line-height: 60px;
        }
        #app{
            overflow: hidden;
            height: 100%;
        }
        .menuBox{
            height: 100%;
        }
        .layui-layer-loading{
            width: auto !important;
            left: 50% !important;
        }

        .chartBox{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
            z-index: 3000;
        }
        .chartBox img{
            width: 35px;
            height: 35px;
            position: absolute;
            left: 50%;
            top: 50%;
        }
        .el-menu-item.is-active{
            color: #ff4444;
        }
        .ztree li span{
            font-size: 14px;
        }
    </style>
</head>
<body>
<el-container id="app" style="visibility: hidden">
    <el-header class="header header-fixed">
        <el-row class="ieRowHeader">
            <el-col :span="12" class="header_content">
                <el-col :span="8">
                    <img src="${basePath}/static/images/merchant/logo_kuaijiao.png">
                </el-col>
                <el-col :span="16" class="col_666" style="cursor: default">
                    收费单位管理系统
                </el-col>
            </el-col>
            <el-col :span="12" class="text-r header_content">
                <el-col :span="6" :offset="3" style="">
                    <!--<img src="assets/image/my_pic.png">-->
                    <span class="col_666 float-l" style="cursor: default;" v-cloak>当前用户：{{NowUser}}</span>
                </el-col>

                <el-col :span="4">
                    <span class="col_666" style="cursor: pointer" @click="goPage('merchant/notice/getBankNotifyListPage')">银行公告</span>
                </el-col>

                <el-col :span="4" :offset="2"  class="col_666" id="resetId">
                    <i class="icon iconfont icon-xiugai"></i>
                    <span class="col_666">修改密码</span>
                </el-col>
                <el-col :span="4" class="col_666" id="outSystem" style="cursor: default">
                    <div class="outSystemBox" @click="outSystem" style="cursor: pointer;width: 80px">
                        <i class="icon iconfont icon-tuichu"></i>
                        <span class="col_666" style="white-space: nowrap;display: inline-block">退出</span>
                    </div>
                </el-col>
            </el-col>
        </el-row>
    </el-header>
    <el-container class="menuBox">
        <el-aside width="200px" class="asideStyle">
            <el-menu  default-active="mms-menu.000"
                      class="el-menu-vertical-demo"
                      :unique-opened="isOneOpen"
                      @open="handleOpen"
                      @close="handleClose">
                <el-submenu :index="menu.menuId" v-for="menu in menuData" :key="menu.menuId" v-if="menu.sysMenus">
                    <template slot="title">
                        <i class="icon iconfont" :class="menu.menuIcon"></i>
                        <span>{{menu.menuName}}</span>
                    </template>
                    <el-menu-item v-for="item in menu.sysMenus"  :key="item.menuId" :index="item.menuId"
                                  @click="goPage(item.menuUrl)" class="menuChildBox">
                        {{item.menuName}}
                    </el-menu-item>
                </el-submenu>

                <el-menu-item index="mms-menu.000" v-else="" @click="goHome" id="menuHome">
                    <i class="icon iconfont icon-shouye"></i>
                    <span slot="title" style="padding-left: 5px">首页</span>
                </el-menu-item>

            </el-menu>
        </el-aside>
        <el-main class="main-right" >
            <div class="mainPage">
                <el-row>
                    <el-col :span="24">
                        <div class="main_head">数据统计</div>
                    </el-col>
                </el-row>

                <el-row :gutter="20" class="mar_bom_20">
                    <el-col :span="8">
                        <el-card class="box-card box-card-style">
                            <el-col :span="3">
                                <i class="icon iconfont icon-1"></i>
                            </el-col>
                            <el-col :span="8">
                                <div class="col_999 mar_bom_10">缴费用户数</div>
                                <div class="fs_20 col_333" v-cloak><b class="bg_f44"></b>{{AllUserNumber}}</div>
                            </el-col>
                            <el-col :span="13">
                                <div class="col_999 mar_bom_10">今日新增缴费用户数</div>
                                <div class="fs_20 col_333" v-cloak><b class="bg_f44"></b><span id="jinrixinzengjiaofei">{{TodayUserNumber}}</span></div>
                            </el-col>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card class="box-card box-card-style">
                            <el-col :span="3">
                                <i class="icon iconfont icon-yonghu"></i>
                            </el-col>
                            <el-col :span="8">
                                <div class="col_999 mar_bom_10">签约用户数</div>
                                <div class="fs_20 col_333" v-cloak><b class="bg_00c192"></b><span id="qianyueyonghushu">{{todayUser}}</span></div>
                            </el-col>
                            <el-col :span="13">
                                <div class="col_999 mar_bom_10">今日签约缴费用户数</div>
                                <div class="fs_20 col_333" v-cloak><b class="bg_00c192"></b>{{todayCostUser}}</div>
                            </el-col>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card class="box-card box-card-style">
                            <el-col :span="3">
                                <i class="icon iconfont icon-money"></i>
                            </el-col>
                            <el-col :span="8">
                                <div class="col_999 mar_bom_10">交易总数</div>
                                <div class="fs_20 col_333" v-cloak><b class="bg_fc720b"></b><span id="jiaoyizongshu">{{AllPayNumber}}</span></div>
                            </el-col>
                            <el-col :span="13">
                                <div class="col_999 mar_bom_10">今日新增交易数</div>
                                <div class="fs_20 col_333" v-cloak><b class="bg_fc720b"></b><span id="jinrixinzengjiaoyi">{{TodayPayNumber}}</span></div>
                            </el-col>
                        </el-card>
                    </el-col>
                </el-row>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-card class="box-card box-card-style-big">
                            <el-col :span="12" class="col_999">
                                <b>总</b>
                                总交易金额
                            </el-col>
                            <el-col :span="12">
                                <div style="margin-top: 20px" class="fs_22 col_fc720b" v-cloak>
                                    ¥<span id="zongjiaoyijine">{{AllPayMoney}}</span>元
                                </div>
                            </el-col>
                        </el-card>
                    </el-col>
                    <el-col :span="12">
                        <el-card class="box-card box-card-style-big">
                            <el-col :span="12" class="col_999">
                                <b>今</b>
                                今交易金额
                            </el-col>
                            <el-col :span="12">
                                <div style="margin-top: 20px" class="fs_22 col_fc720b" v-cloak>
                                    ¥<span id="jinrijiaoyijine">{{TodayPayMoney}}</span>元
                                </div>
                            </el-col>
                        </el-card>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="trend-chart">走势图</div>
                    </el-col>
                </el-row>
                <el-row style="background-color: #fff;padding: 20px;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);">
                    <el-col :span="24">
                        <el-button style="width: 100px;" class="btn-charts-total btn-charts" size="small" @click="loadTotalCharts">累计</el-button>
                        <el-button style="width: 100px;"  class="btn-charts-add" size="small" @click="loadAddCharts">新增</el-button>
                    </el-col>
                    <el-col :span="24" style="margin: 20px 0;">
                        <el-select @change="latelyCharts" v-model="lately" placeholder="请选择">
                            <el-option label="最近7天" value="7"></el-option>
                            <el-option label="最近15天" value="15"></el-option>
                            <el-option label="最近30天" value="30"></el-option>
                        </el-select>
                        <el-date-picker
                                class="date_picker"
                                @change="selectDate"
                                v-model="dates"
                                type="daterange"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </el-col>
                    <el-col :span="24" style="position: relative">
                        <div class="chartBox" v-show="showChartBox">
                            <img src="${basePath}/static/images/merchant/lodingIE9.gif">
                        </div>
                        <div v-show="isTotal"
                             id="trend-chart"
                             style="width: 100%;height: 400px;"></div>
                        <div v-show="isAdd"

                             id="add-trend-chart"
                             style="width: 100%;height: 400px;"></div>
                    </el-col>
                </el-row>
            </div>
        </el-main>
        <!--修改摩玛弹出框-->
        <div class="isShowingBox" v-show="isShowingBox"></div>
        <el-dialog :close-on-click-modal="ismodalClose" :show-close="showDelBtn" title="修改密码" :visible.sync="dialogFormVisible" id="resetBox">
            <span class="delDialogBtn" @click="closeAddDialog">x</span>
            <el-form :model="form">
                <el-form-item label="原密码：" :label-width="formLabelWidth">
                    <el-input v-model="form.oldPassWord" type="password" @blur="showingWaringBox" auto-complete="off" placeholder="请输入旧密码"></el-input>
                    <span class="passwordWaring">{{oldPassWordInfo}}</span>
                </el-form-item>
                <el-form-item label="新密码：" :label-width="formLabelWidth">
                    <el-input v-model="form.newPassWord" type="password" @blur="showingWaringNewPassBox" placeholder="请输入新密码" auto-complete="off"></el-input>
                    <span class="passwordWaring">{{newPassWordInfo}}</span>
                </el-form-item>
                <el-form-item label="确认密码：" :label-width="formLabelWidth">
                    <el-input v-model="form.reNewPassWord" type="password" @blur="showingWaringResetNewPassBox" placeholder="请再次输入" auto-complete="off"></el-input>
                    <span class="passwordWaring">{{resetNewPassWordInfo}}</span>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="backHome">取 消</el-button>
                <el-button type="primary" @click="closeResetPass">确 定</el-button>
            </div>
        </el-dialog>
    </el-container>
</el-container>

<!--[if IE]>
<script>
    function goIEPage123(ieNumber){
        if (ieNumber < 9){
            //window.location.href = '${basePath}/notice_manage_IE';
            window.location.href="${basePath}/upBower";
            return
        }else{
            $("html").css({'visibility':'visible'});
        }
    }
    goIEPage123(IEVersion());
</script>
<![endif]-->



<script>

    $(function(){
        placeHolde('.date_picker input:first',"开始日期");
        placeHolde('.date_picker input:last',"结束日期");
    });

    // 提示消息弹窗
    var layer,
        loadBox;
    layui.use('layer', function(){
         layer = layui.layer;
         loadBox  = layer.load(1, {shade: [0.5, '#000']});
    });



    $(function () {
        $("#resetId").click(function () {
            app.dialogFormVisible = true;
            app.isShowingBox = true;
            app.form.oldPassWord='';
            app.form.newPassWord='';
            app.form.reNewPassWord='';

            app.oldPassWordInfo='';
            app.newPassWordInfo='';
            app.resetNewPassWordInfo='';
        });
    });

    var app =
        new Vue({
            el: "#app",
            data: {

                isShowingBox:false,
                showDelBtn:false,

                showChartBox:true,
                todayUser:'0',
                todayCostUser:'0',
                AllUserNumber:'0',
                TodayUserNumber:'0',
                TodayPayNumber:'0',
                AllPayNumber:'0',
                TodayPayMoney:"0",
                AllPayMoney:'0',


                loadingCharts:true,// 累计loading
                loadingAddCharts:false,// 新增loading
                isTotal:true,// 显示累计图
                isAdd:false,// 显示新增图
                dates:[], // 日期选择
                lately:"30", // 天数下拉框
                isOneOpen:true,
                NowUser:'',
                oldPassWordInfo:'',
                newPassWordInfo:'',
                resetNewPassWordInfo:'',
                ismodalClose:false,
                menuData: [],
                dialogFormVisible: false,
                form: {
                    oldPassWord:'',
                    newPassWord:'',
                    reNewPassWord:'',
                },
                formLabelWidth: '120px'
            },
            methods: {
                backHome:function () {
                    this.closeAddDialog();
                },
                /**
                 * 点击X关闭模态框
                 * */
                closeAddDialog:function () {
                    this.dialogFormVisible = false;
                    this.isShowingBox = false;
                },
                // 登录进来加载累计走势图（默认加载最近30天）
                loadCharts:function(){
                    var kjChart = echarts.init(document.getElementById('trend-chart'));
                    var option = {
                        color:['#ff4444','#00c192','#feb415','#00aaee'],
                        title: {
                            text: '累计折线图'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['累计缴费用户数','累计签约用户数','累计交易总数']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {

                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name:'',
                                type:'line',
                                data:[]
                            },
                        ]
                    };
                    kjChart.setOption(option);
                    var options1 = {};
                    sendService('${basePath}merchant/eCharts/geteCharts',options1,function (resDate) {
                        if(resDate.status == 'success'){
                            app.showChartBox = false;
                            kjChart.setOption({
                                xAxis: {
                                    data: resDate.t.date
                                },
                                series: resDate.t.series
                            });
                        }
                    });
                },
                // 7、15、30change事件
                latelyCharts:function(){
                    app.showChartBox = true;
                    if(app.isTotal){
                        var kjChart = echarts.init(document.getElementById('trend-chart'));
                        var option = {
                            color:['#ff4444','#00c192','#feb415','#00aaee'],
                            title: {
                                text: '累计折线图'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['累计缴费用户数','累计签约用户数','累计交易总数']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {

                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: []
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name:'',
                                    type:'line',
                                    stack: '总量',
                                    data:[]
                                },
                            ]
                        };
                        kjChart.setOption(option);
                        var options1 = {'lately':this.lately};//传参7、15、30
                        sendService('${basePath}merchant/eCharts/geteCharts',options1,function (resDate) {
                            if(resDate.status == 'success'){
                                //app.loadingCharts = false;
                                app.showChartBox = false;
                                kjChart.setOption({
                                    xAxis: {
                                        data: resDate.t.date
                                    },
                                    series: resDate.t.series
                                });
                            }
                        });
                    } else if(app.isAdd){
                        var kjAddChart = echarts.init(document.getElementById('add-trend-chart'));
                        var option = {
                            color:['#ff4444','#00c192','#feb415','#00aaee'],
                            title: {
                                text: '新增折线图'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['新增缴费用户数','新增签约用户数','新增交易总数']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {

                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: []
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name:'',
                                    type:'line',
                                    stack: '总量',
                                    data:[]
                                },
                            ]
                        };
                        kjAddChart.setOption(option);
                        var options1 = {'lately':this.lately};//传参7、15、30
                        sendService('${basePath}merchant/eCharts/geteChartsCum',options1,function (resDate) {
                            if(resDate.status == 'success'){
//                                app.loadingAddCharts = false;
                                app.showChartBox = false;
                                kjAddChart.setOption({
                                    xAxis: {
                                        data: resDate.t.date
                                    },
                                    series: resDate.t.series
                                });
                            }
                        });
                    }
                },
                // 时间段选择
                selectDate:function(){
                    if(app.isTotal){
                        //app.loadingCharts = true;
                        app.showChartBox = true;
                        var kjChart = echarts.init(document.getElementById('trend-chart'));
                        var option = {
                            color:['#ff4444','#00c192','#feb415','#00aaee'],
                            title: {
                                text: '累计折线图'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['累计缴费用户数','累计签约用户数','累计交易总数']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {

                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: []
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name:'',
                                    type:'line',
                                    stack: '总量',
                                    data:[]
                                },
                            ]
                        };
                        kjChart.setOption(option);
                        if(app.dates != null){
                            var options = {'dates':app.dates.join(',')};//传参时间
                            sendService('${basePath}merchant/eCharts/geteCharts',options,function (resDate) {
                                if(resDate.status == 'success'){
                                    // app.loadingCharts = false;
                                    app.showChartBox = false;
                                    kjChart.setOption({
                                        xAxis: {
                                            data: resDate.t.date
                                        },
                                        series: resDate.t.series
                                    });
                                }
                            });
                        }else{
                            app.showChartBox = false;
                            app.latelyCharts();
                        }
                    }else if(app.isAdd){
                        //app.loadingAddCharts = true;
                        app.showChartBox = true;
                        var kjAddChart = echarts.init(document.getElementById('add-trend-chart'));
                        var option = {
                            color:['#ff4444','#00c192','#feb415','#00aaee'],
                            title: {
                                text: '新增折线图'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['新增缴费用户数','新增签约用户数','新增交易总数']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {

                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: []
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name:'',
                                    type:'line',
                                    stack: '总量',
                                    data:[]
                                },
                            ]
                        };
                        kjAddChart.setOption(option);
                        if(app.dates != null){
                            var options1 = {'dates':app.dates.join(',')};//传参时间
                            sendService('${basePath}merchant/eCharts/geteChartsCum',options1,function (resDate) {
                                if(resDate.status == 'success'){
                                    //app.loadingAddCharts = false;
                                    app.showChartBox = false;
                                    kjAddChart.setOption({
                                        xAxis: {
                                            data: resDate.t.date
                                        },
                                        series: resDate.t.series
                                    });
                                }
                            });
                        }else{
                            app.showChartBox = false;
                            app.latelyCharts();
                        }
                    }
                },
                // 新增走势图
                loadAddCharts:function(){
                    app.isTotal = false;
                    app.isAdd = true;
                    //app.loadingAddCharts = true;
                    app.showChartBox = true;
                    var width = $("#trend-chart").width();
                    var height = $("#trend-chart").height();
                    $("#add-trend-chart").css("width", width).css("height", height);
                    $(".btn-charts-add").addClass('btn-charts').siblings().removeClass('btn-charts');
//                        console.log($(".btn-charts-add").siblings());
//                        $(".btn-charts-total").removeClass('btn-charts');
                    app.lately = '30';
                    app.dates = [];
                    var kjAddChart = echarts.init(document.getElementById('add-trend-chart'));
                    var option = {
                        color:['#ff4444','#00c192','#feb415','#00aaee'],
                        title: {
                            text: '新增折线图'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['新增缴费用户数','新增签约用户数','新增交易总数']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {

                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name:'',
                                type:'line',
                                stack: '总量',
                                data:[]
                            },
                        ]
                    };
                    kjAddChart.setOption(option);
                    var options = {};
                    sendService('${basePath}merchant/eCharts/geteChartsCum',options,function (resDate) {
                        if(resDate.status == 'success'){
                            //app.loadingAddCharts = false;
                            app.showChartBox = false;
                            kjAddChart.setOption({
                                xAxis: {
                                    data: resDate.t.date
                                },
                                series: resDate.t.series
                            });
                        }
                    });
                },
                // 累计走势图
                loadTotalCharts:function(){
                    app.isTotal = true;
                    app.isAdd = false;
                    //app.loadingCharts = true;
                    app.showChartBox = true;
                    var width = $("#add-trend-chart").width();
                    var height = $("#add-trend-chart").height();
                    $("#trend-chart").css("width", width).css("height", height);
                    $(".btn-charts-total").addClass('btn-charts').siblings().removeClass('btn-charts');
//                        $(".btn-charts-add").removeClass('btn-charts');
                    app.lately = '30';
                    app.dates = [];
                    var kjChart = echarts.init(document.getElementById('trend-chart'));
                    var option = {
                        color:['#ff4444','#00c192','#feb415','#00aaee'],
                        title: {
                            text: '累计折线图'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['累计缴费用户数','累计签约用户数','累计交易总数']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {

                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: []
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name:'',
                                type:'line',
                                stack: '总量',
                                data:[]
                            },
                        ]
                    };
                    kjChart.setOption(option);
                    var options = {};
                    sendService('${basePath}merchant/eCharts/geteCharts',options,function (resDate) {
                        if(resDate.status == 'success'){
                            //app.loadingCharts = false;
                            app.showChartBox = false;
                            kjChart.setOption({
                                xAxis: {
                                    data: resDate.t.date
                                },
                                series: resDate.t.series
                            });
                        }
                    });

                },

                /**
                 * 修改密码
                 */
                closeResetPass:function(){
                    var that = this;
                    if(this.form.oldPassWord == ''){
                        this.oldPassWordInfo = '请输入原密码';
                        return
                    }
                    if(this.form.newPassWord == ''){
                        this.newPassWordInfo = '请输入新密码';
                        return
                    }
                    if(this.form.newPassWord.length < 6 ||this.form.newPassWord.length > 18){
                        this.newPassWordInfo = '密码长度为6到18个字符';
                        return

                    }
                    if(this.form.reNewPassWord == ''){
                        this.resetNewPassWordInfo = '请再次输入';
                        return
                    }
                    if(this.form.reNewPassWord != this.form.newPassWord){
                        this.resetNewPassWordInfo = '两次密码输入不一致'
                        return
                    }

                    //this.form.reNewPassWord = md5(this.form.reNewPassWord);
                    var options3= {
                        oldPassword:md5(this.form.oldPassWord),
                        newPassword: md5(this.form.reNewPassWord)
                    };
                    sendService('${basePath}/merchant/password/toUpdatePassword', options3, function (resData) {
                        if(resData.status == 'success'){
//                            that.loading=false;
//                            that.$message({
//                                type: 'success',
//                                message: resData.msg
//                            });
                            layer.msg(resData.msg, {icon: 6});
                            that.isShowingBox = false;
                            that.dialogFormVisible = false;

                            setTimeout(function () {
                                localStorage.clear()
                                window.location.href="${basePath}/logout";
                            },1000)

                        }else {
                            that.oldPassWordInfo = '原密码错误';
                            //that.$message.error(resData.msg);
                            layer.msg(resData.msg, {icon: 2});
                        }
                    })

                },
                /**
                 * 退出系统
                 */
                outSystem:function(){
                    var that = this;
                    var msg = confirm('确认要退出吗？');
                    if(msg){
                        localStorage.clear()
                        window.location.href="${basePath}/logout";
                    }
//                    this.$confirm('确认要退出吗？','提示', {
//                        confirmButtonText: '确定',
//                        cancelButtonText: '取消',
//                        type: 'warning'
//                    }).then(function () {
//                        localStorage.clear()
//                        window.location.href="${basePath}/logout";
//                    }).catch(function () {
//
//                    })

                },
                showingWaringBox:function(){
                    if(this.form.oldPassWord == ''){
                        this.oldPassWordInfo = "请输入原密码";
                    }
                    if(this.form.oldPassWord != ''){
                        this.oldPassWordInfo = '';
                    }
                },
                showingWaringNewPassBox:function(){
                    var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
                    if(this.form.newPassWord == ''){
                        this.newPassWordInfo = '请输入新密码';
                    }
                    if(this.form.newPassWord.length < 6 ||this.form.newPassWord.length > 18){
                        this.newPassWordInfo = '密码长度为6到18个字符';

                    }else {
                        this.newPassWordInfo = '';
                    }

                },
                showingWaringResetNewPassBox:function(){
                    if(this.form.newPassWord == ''){
                        this.newPassWordInfo = '请输入新密码';
                        return
                    }
                    if(this.form.reNewPassWord == ''){
                        this.resetNewPassWordInfo = '请再次输入密码';
                        return
                    }
                    if(this.form.reNewPassWord != this.form.newPassWord){
                        this.resetNewPassWordInfo = '两次密码输入不一致'
                    }
                    if(this.form.reNewPassWord === this.form.newPassWord){
                        this.resetNewPassWordInfo = ''
                    }
                },
                goPage: function (url) {
                    $(".main-right").empty();
                    $(".main-right").load('${basePath}'+url);
                },
                goHome:function(){
                    //reloadPage('${basePath}merchant/first/toMainPage');
                    $(".main-right").empty();
                    $(".main-right").load('${basePath}merchant/first/toMainPage');

                    if($(".menuChildBox").length > 0){
                        $(".menuChildBox").css({"border-right":"none"});
                    }

                },
                handleOpen:function(key, keyPath) {
                    console.log(key, keyPath);
                    var menuBox = $(".menuChildBox")  //document.querySelectorAll('.menuChildBox');
                    $(menuBox).click(function (e) {
                        $(menuBox).css({"border-right":"4px solid transparent"});
                        $(this).css({"border-right":"4px solid #ff4444"});

                    })

                },
                handleClose:function(key, keyPath) {
                    console.log(key, keyPath);
                }
            },
            created: function () {
                $("#app").css({"visibility": "visible"});
                this.NowUser='${Session['sessionUser'].nickname}'
//                var  loading = this.$loading({
//                    lock: true,
//                    text: 'Loading',
//                    spinner: 'el-icon-loading',
//                    background: 'rgba(0, 0, 0, 0.7)'
//                });

                var options= {};
                sendService('${basePath}/system/menu/getMenuByUrl', options, function (resData) {
                    if(resData.status == 'success'){
                        layer.close(loadBox);
                        app.menuData = resData.t;
                        app.menuData.unshift({
                            menuId: "mms-menu.000",
                            menuName: "首页"
                        });

                    }
                });

                var easingFn = function (t, b, c, d) {
                    var ts = (t /= d) * t;
                    var tc = ts * t;
                    return b + c * (tc * ts + -5 * ts * ts + 10 * tc + -10 * ts + 5 * t);
                };
                var options = {
                    useEasing: true,
                    easingFn: easingFn,
                    useGrouping: true,
                    separator: ',',
                    decimal: '.',
                };



                var that = this;
                var options= {};
                sendService('${basePath}/merchant/bind/getUserNumber', options, function (resData) {
                    that.todayUser = resData.t;
                    var demo = new CountUp('qianyueyonghushu', 0, that.todayUser, 0, 1, options);
                    demo.start();
                });
                var options1= {};
                sendService('${basePath}/merchant/bind/getTodayUserNumber', options1, function (resData) {
                    that.todayCostUser = resData.t;
                    var demo1 = new CountUp('jinriqianyuejiaofei', 0, that.todayCostUser, 0, 1, options);
                    demo1.start();
                });
                var options2= {};
                sendService('${basePath}/merchant/feeUserr/getAllUserNumber', options2, function (resData) {
                    that.AllUserNumber = resData.t;
                    var demo2 = new CountUp('jiaofeiyonghushu', 0, that.AllUserNumber, 0, 1, options);
                    demo2.start();
                });
                var options3= {};
                sendService('${basePath}/merchant/feeUserr/getTodayUserNumber', options3, function (resData) {
                    that.TodayUserNumber = resData.t;
                    var demo3 = new CountUp('jinrixinzengjiaofei', 0, that.TodayUserNumber, 0, 1, options);
                    demo3.start();
                });

                var options4= {};
                sendService('${basePath}/merchant/payment/getTodayPayNumber', options4, function (resData) {
                    that.TodayPayNumber = resData.t;
                    var demo4 = new CountUp('jinrixinzengjiaoyi', 0, that.TodayPayNumber, 0, 1, options);
                    demo4.start();
                });

                var options5= {};
                sendService('${basePath}/merchant/payment/getAllPayNumber', options5, function (resData) {
                    that.AllPayNumber = resData.t;
                    var demo5 = new CountUp('jiaoyizongshu', 0, that.AllPayNumber, 0, 1, options);
                    demo5.start();
                });

                var options6= {};
                sendService('${basePath}/merchant/payment/getTodayPayMoney', options6, function (resData) {
                    var totalCost = resData.t;
                    //that.TodayPayMoney = fmoney(totalCost, 2);
                    that.TodayPayMoney = totalCost;
                    var demo6 = new CountUp('jinrijiaoyijine', 0, that.TodayPayMoney, 2, 1, options);
                    demo6.start();
                });

                var options7= {};
                sendService('${basePath}/merchant/payment/getAllPayMoney', options7, function (resData) {
                    var totalCost = resData.t;
                    //that.AllPayMoney = fmoney(totalCost, 2);
                    that.AllPayMoney = totalCost;
                    var demo7 = new CountUp('zongjiaoyijine', 0, that.AllPayMoney, 2, 1, options);
                    demo7.start();

                });


            },
            mounted:function () {
                this.loadCharts();
            }
        });


    /**
     * 格式化货币
     * @param s  需要格式化的货币金额
     * @param n  保留几位小数
     * @returns {string}
     */
    function fmoney(s, n)
    {
        n = n > 0 && n <= 20 ? n : 2;
        s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
        var l = s.split(".")[0].split("").reverse(),
            r = s.split(".")[1];
        t = "";
        for(i = 0; i < l.length; i ++ )
        {
            t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
        }
        return t.split("").reverse().join("") + "." + r;
    }

</script>
</body>
</html>